<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside width="20%">
        <div>
          <img src="@/assets/logo.png" >
        </div>
        <el-menu :unique-opened="true" :router="true">
          <el-menu-item index="/">
            <template #title> 
              <el-icon><odometer /></el-icon>
              <span>仪表盘</span>
            </template>
        </el-menu-item>
          
        <el-sub-menu index="2">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>常用设置</span>
          </template>
          <el-menu-item index="Jsgl">教师管理</el-menu-item>
          <el-menu-item index="Xsgl">学生管理</el-menu-item>
          <el-menu-item index="Gggl">公告管理</el-menu-item>
          <el-menu-item index="Xtpz">系统配置</el-menu-item>
          <el-menu-item index="Pdfwq">判题服务器</el-menu-item>        
        </el-sub-menu>
            
        <el-sub-menu index="3">
          <template #title>     
            <el-icon><Aim /></el-icon>
            <span>问题</span>        
          </template>  
          <el-menu-item index="Wtlb">问题列表</el-menu-item>
          <el-menu-item index="Zjtm">增加题目</el-menu-item>
          <el-menu-item index="Drdctm">导入导出题目</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="4">
          <template #title>
            <el-icon><trophy /></el-icon>
            <span>比赛&练习</span>
          </template>
          <el-menu-item index="Bslb">比赛列表</el-menu-item>
          <el-menu-item index="Cjbs">创建比赛</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="5">
          <template #title>
            <el-icon><collection /></el-icon>
            <span>课程</span>
          </template>
          <el-menu-item index="Kclb">课程列表</el-menu-item>
          <el-menu-item index="Cjkc">创建课程</el-menu-item>
        </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-dropdown size="large">
            <span class="el-dropdown-link">
              username
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>  
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
            </el-dropdown>
            <el-icon><share /></el-icon>
            <el-icon><search /></el-icon>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>Build Version: 20210929bd
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Odometer, Menu as IconMenu, Aim, Trophy, Collection,InfoFilled,Search,Share,ArrowDown} from '@element-plus/icons-vue';

export default {
    name: 'index',
    components: {
        Odometer, IconMenu, Aim, Trophy, Collection, InfoFilled,Search,Share,ArrowDown
    },
    methods: {
        
    }
}
</script>

<style scoped>
    .common-layout, .container {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .el-aside > div {
        width: 100%;
        height: 20%;
        vertical-align: middle;
        text-align: center;
    }
    .el-aside > div > img {
        width: 50%;
        height: 80%;
    }
    .el-header {
        background-color: #F9FAFC;
    }
    .el-header > i {
        margin-top: 15px;
        margin-right: 15px;
    }
    .el-header > .el-dropdown {
        margin-top: 15px;
    }
    .el-header > .el-dropdown, .el-header > i {
        float: right;
    }
    .el-dropdown-link {
        font-size: 23px;
        font-weight: bolder;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .el-main, .el-footer  {
        background-color: #EDECEC;
    }
</style>